<template>
  <uni-nav-bar title="福利品" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale space-between" style="margin-top:20rpx;padding:20rpx" v-for="item in orderLists"
    :key="item.id">
    <image :src="item.goods_image" mode=""></image>
    <view class="right direction-start" style="justify-content:space-around;">
      <view class="title">{{item.goods_name}}</view>
      <view class="space-between" style="width: 100%;">
        <view class="center"><text style="font-size: 36rpx;">{{item.goods_score}}</text><text
            style="font-size:26rpx;margin-left:10rpx;">蓝宝石</text></view>
        <view>X{{item.nums}}</view>
      </view>
    </view>
  </view>
  <Popu v-if="orderLists&&orderLists.length<1" :pageHeight="400" text="暂无活动信息"></Popu>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { getSubscribeCartAll } from '@/gql/earthPushing/dispatch';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const orderLists = ref()
  init()
  function init() {
    showLoading()
    const payload = {
      query: getSubscribeCartAll,
      variables: {
        staff_id,
      },
    };
    toPublish(
      'ql/score/getSubscribeCartAll',
      payload,
      (obj : any) => {
        const { getSubscribeCartAll } = obj.data;
        orderLists.value = getSubscribeCartAll.list
      },
    );
  }
</script>

<style scoped lang="less">
  image {
    width: 130rpx;
    height: 130rpx;
    border-radius: 10rpx;
  }

  .right {
    width: 79%;
    height: 130rpx;

    .title {
      max-width: 100%;
      display: -webkit-box;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
</style>